import { Component, ElementRef, OnInit, ViewChild, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { zip } from 'rxjs';
import { SingleSpaService } from 'src/app/services/single-spa.service';

@Component({
  selector: 'container-spa-host',
  templateUrl: './spa-host.component.html',
  styleUrls: ['./spa-host.component.sass']
})
export class SpaHostComponent implements OnInit, OnChanges, OnDestroy {

  @ViewChild('app1', { static: true })
  private app1!: ElementRef;
  @ViewChild('app2', { static: true })
  private app2!: ElementRef;

  constructor(private service: SingleSpaService) { }

  ngOnInit(): void {
    this.service.mount('app1', this.app1.nativeElement).subscribe();
    this.service.mount('app2', this.app2.nativeElement).subscribe();
  }

  async ngOnDestroy() {
    await zip(
      this.service.unmount('app1'),
      this.service.unmount('app2')
    ).toPromise();
  }

  async ngOnChanges(changes: SimpleChanges) {
    await zip(
      this.service.unmount('app1'),
      this.service.unmount('app2')
    ).toPromise();
  }

}
